{extend name="common@portalBase" /}
{block name="content"}
<style>
  .btn-question {
    margin: 5px;
  }

  .flag {
    position: absolute;
    top: -10px;
    right: -5px;
    border-radius: 30%;
    text-shadow: 0 0 10px #000;
  }

  .panel-title {
    font-weight: bold;
  }

  .text-question {
    line-height: 300%;
    font-size: larger;
  }

  .red {
    color: red;
  }

  .green {
    color: green;
  }

  .btn-question {
    width: 50px;
    position: relative;

  }

  .div-btn-question {
    /*display: none;*/
  }

  .btn-danger.active {
    background-color: #c43e3a;
  }

  .btn-danger.success {
    background-color: #378d37;
  }
</style>
<section class="content" id="exam">
  <div class="row">
    <div class="col-xs-12 col-md-10">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">第{{cursor+1}}题
            <div class="qType">{{type==0 ? '判断题' : '单选题'}}</div>
          </h3>
        </div>
        <div class="panel-body">
          <div class="text-question">
            {{content}}
          </div>
          <hr/>
          <div class="list-group">
            <a href="#" class="list-group-item "
               v-on:click="answerClick(index)"
               v-for="(item,index) in answers">
              {{item}}
              <div class="pull-right">
                <i class="fa fa-check text-success" v-show="active==index"></i></div>
            </a>
          </div>
          <div class="alert alert-success alert-dismissible" v-show="paperSign[cursor]>0 &&rightAnswer==active">
            <h4><i class="icon fa fa-check"></i> 恭喜你回答正确</h4>
          </div>
          <div class="alert alert-danger alert-dismissible" v-show="paperSign[cursor]>0 && rightAnswer!=active">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
            <h4><i class="icon fa fa-exclamation"></i> 请注意正确答案是 <strong>{{rightAnswerChr}}</strong></h4>
          </div>
          <a href="#" class="btn btn-default " v-show="cursor>0" v-on:click="lastQuestion">上一题</a>
          <a href="#" class="btn btn-default " v-show="cursor<cursorMax-1" v-on:click="nextQuestion">下一题</a>
          <div class="pull-right">
            <span v-on:click="clearQuestion" style="cursor: pointer">
              <i class="fa fa-trash fa-lg" data-toggle="tooltip" data-placement="left"
                 title="清除练习记录"></i>
            </span>
          </div>
        </div>
        <div class="panel-footer">
          <label for="">题目列表</label>
          <div class="row div-btn-question" style="margin:auto;overflow-y:scroll;max-height: 300px;">
            <div type="button" class="btn btn-default btn-question" v-for="(item,index) in cursors"
                 v-bind:class="{'btn-primary':paperAnswers[index]!=undefined
                 ,'btn-success':paperSign[index]==1
                 ,'btn-danger':paperSign[index]==2
                 ,'active':cursor==index
                 }"
                 v-on:click="getQuestion(index)">{{item}}
            </div>
          </div>

        </div>
      </div>
    </div>

  </div>
</section>
{/block}
{block name="page_script"}
<script>
  require(["vue", "layer_config", "ajaxForm"], function (Vue, layer) {
    var exam = new Vue({
      el: "#exam",
      data: {
        nowTimestamp: {$nowTimestamp}, //当前时间戳
        cursorMax: {$cursorMax}, //最大游标
        content: '',  //问题
        answers: [],  //答案
        cursor: {$cursor}, //当前游标
        cursors: {$cursors}, //所有游标，用于分页
        active: -1,
        lastActive: -1,
        paperAnswers: [],
        paperQuestions: {$questions},
        paperQuestionIDs: {$questionIDs},
        paperSign: [],
        rightAnswerChr: '',
        rightAnswer: -1,
        type: 0,
        'answers': {$answers},
        'signs': {$signs},
      },
      created: function () {
        var that = this;
        var id, cursor = that.cursor;
        var studyAnswer = that.answers;
        var paperSign = that.signs;
        console.log(studyAnswer);
        id = that.paperQuestionIDs[cursor];
        that.content = that.paperQuestions[id].content;
        that.answers = JSON.parse(that.paperQuestions[id].answers);
        that.type = that.paperQuestions[id].type;
        if (studyAnswer) {
          that.paperAnswers = (studyAnswer);
        }
        if (paperSign) {
          that.paperSign = (paperSign);
        }

      },
      watch: {
        cursor: function (id) {
          console.log(id);
        }
      },
      methods: {
        clearQuestion: function () {
          var that = this;
          layer.confirm("确定要清空答题记录吗？", function (index) {
            $.post("{:url('clearAnswer')}", {}, function (result) {
              if (result && result.code == 1) {
                js_message('清空成功', function () {
                  that.paperAnswers = [];
                  that.paperSign = [];
                  that.cursor = 0;
                });
              } else {
                js_alert(result ? result.msg : '网络错误');
              }
            });
            layer.close(index);
          });
          return false;
        },
        showQuestion: function () {
          $(".div-btn-question").animate({
            height: 'toggle'
          });
        },
        answerClick: function ($index) {
          var that = this;
          var cursor = this.cursor;
          var id;
          var next = false;
          var sign;
          if (this.active == $index)
            return false;
          id = that.paperQuestionIDs[cursor];
          that.paperAnswers[cursor] = $index;
          that.active = $index;
          that.rightAnswer = that.paperQuestions[id].right;
          that.rightAnswerChr = String.fromCharCode(that.rightAnswer + 65);
          if (that.paperQuestions[id].right == $index) {
            sign = 1;
            that.paperSign[cursor] = 1;
            next = true;
          } else {
            sign = 2;
            that.paperSign[cursor] = 2;
          }
          $.post("{:url('doAnswer')}", {
            "cursor": cursor,
            'answer': $index,
            "sign": sign
          }, function (result) {
            if (result && result.code == 1) {
              js_message('答题成功', function () {
                if (next) that.nextQuestion();
              });
            } else {
              js_alert(result ? result.msg : '网络错误');
            }
          })
          //


        },
        getQuestion: function (cursor) {
          var that = this;
          var nowCusor = this.cursor;
          var active = this.active;
          var id = that.paperQuestionIDs[cursor];
          if (cursor == this.cursor) return false;

          that.content = that.paperQuestions[id].content;
          that.answers = JSON.parse(that.paperQuestions[id].answers);
          that.active = that.paperAnswers[cursor];
          that.cursor = cursor;
          that.type = that.paperQuestions[id].type;
          that.rightAnswer = that.paperQuestions[id].right;
          that.rightAnswerChr = String.fromCharCode(that.rightAnswer + 65);

        },
        nextQuestion: function (e) {
          if (this.cursor > this.cursorMax)
            return false;
          this.getQuestion(this.cursor + 1);
        },
        lastQuestion: function (e) {
          if (this.cursor <= 0)
            return false;
          this.getQuestion(this.cursor - 1);
        }
      },
    });

    $('[data-toggle="tooltip"]').tooltip();
  });

</script>
{/block}





